Chatting

The Start Screen

Click the AI tab (sparkle icon) in the sidebar. The panel opens on the start screen, which asks What are we building today? and lists the assistants you can work with.

• Surprise Me: Plays a demo of what the AI can do. See Surprise Me.
• Visual AI with Claude Code: The built-in chat. Click the row, or the message box, and start typing.
• Claude Code CLI and Codex CLI: The command-line tools, running inside the panel. If you have not installed either CLI yourself, the two rows are folded into a Use a CLI instead line. Click it to open them. You can run several sessions at once. See Claude Code CLI and Codex CLI.
• AI Settings: The link at the bottom opens the settings dialog, where you can add a custom provider. See Models and Providers.

Once you have used the panel, or when you click the x on the card, the Surprise Me card shrinks to a Want a demo? Surprise me. line at the bottom, so the rows come first.

After your first chat, a Usage card appears below the rows. See Usage and Cost.

Surprise Me

The first time you click Surprise Me, the panel plays a recorded build: a real conversation, replayed in the chat while the files land in your project and the Live Preview shows the result. The editor switches to Design Mode so the preview fills the window. This uses no AI credits and works before you sign in to Claude.

A bar at the bottom of the panel controls the demo. Click the speed button to cycle through 1x to 32x, or click Back to leave. When the demo ends, a card shows which model built it, with Reveal the prompt to see the prompt that was used, See another demo to play the next one, and + New to start your own chat.

From then on, Surprise me opens a choice:

• Make something new: The AI builds a small project of its own choosing, live. This uses your Claude credits, and the permission mode switches to Auto for it. When you are offline, a recorded demo plays instead.
• Show another demo: Plays the next recorded demo for free.

Demos and live builds create files in the project you have open. Try them in a scratch project.

Sending Messages

Type in the message box at the bottom and press Enter to send. Press Shift + Enter for a new line. Your message appears under You, and the reply under Claude.

While the AI is working, a status line under the chat shows what it is doing, like Thinking..., Waiting for the model..., Read..., or Edit..., with a timer once it takes more than a few seconds. The send button turns into a stop button (square icon). Click it, or press Esc while the message box has focus, to stop the AI. Anything it already did stays in the chat.

You can keep typing while the AI works. Press Enter and the message is held in a Queued bubble above the message box. The AI reads it as soon as it finishes its current step and folds it into what it is doing. If the AI finishes first, the queued message is sent as the next turn. Click Edit on the bubble to take the text back into the message box.

If the chat hits an error it cannot recover from, the message box is disabled and a New button appears under the error. Start a new chat and send your message again.

The first time you send a message, Phoenix Code asks you to confirm that prompts and context are sent to Claude Code.

Context

Phoenix Code tells the AI what you are looking at. Chips above the message box show what goes along with your next message:

• Live Preview: Shown while the Live Preview is open. The AI is told which page it shows.
• Selection L12-L40 in index.html: Shown when you have text selected in the editor. A short selection goes with your message in full. For a longer one, the AI gets the line range and reads the lines itself.
• Line 26 in index.html: Shown when nothing is selected. The AI is told which file you are in and where the cursor is.
• Folder chips: One for each folder you added with Add folder as context. See Attachments and Screenshots.

The AI is also told which open files have unsaved changes, so it reads what you see in the editor instead of the file on disk.

Click the x on a chip to leave that part out. The chip comes back when the selection, the cursor line, or the Live Preview changes.

Attachments and Screenshots

Click the + button next to the message box to attach more context:

• Attach a file: Pick one or more files. Images are attached as pictures the AI can look at. Other files are attached as references, and the AI reads them when it needs to.
• Add folder as context: Pick any folder, for example one outside your project. It appears as a chip, and the AI treats the files inside it like files in your project. The folder stays attached for this project until you remove the chip.
• Area screenshot: Draw a rectangle over any part of the window. Drag the handles to adjust it, or drag inside it to move it, then click Capture or press Enter. Click Select the whole window to capture all of it. Press Esc to cancel.
• Live Preview screenshot: Whatever the Live Preview shows, including a Markdown preview.
• Live Preview selection screenshot: Just the element selected in the Live Preview. It is greyed out until an element is selected on an HTML page.

You can also paste an image, or files copied from your file manager, into the message box. Attachments appear in a tray above the message box. Click an image to see it full size, click a file to open it in the editor, or click the x to remove an attachment. A message can carry up to 10 images, in PNG, JPEG, GIF, WebP, or SVG. Large images are shrunk before they are sent.

The AI can take its own screenshots of the Live Preview and the editor while it works. They show up as cards in the chat, and a banner at the top of the preview reads AI is inspecting the live preview while it looks.

Following the AI's Work

Everything the AI does appears as a card in the chat, in the order it happens: Read index.html, Edit styles.css, Ran command, Screenshot of live preview, and so on. Click a card to see the details, like the command it ran or the code it inspected. Click a file name on a card to open the file. A card that did not work is marked failed, and an edit that could not be applied reads Edit rejected.

For a bigger task the AI keeps a task list card, like 2 of 5 tasks done, and ticks off the steps as it goes.

When two or more steps finish in a row, they are folded into one card that reads, for example, 3 steps, with the files it read and edited listed underneath. Click the card to open the steps.

Cards for edits have a Show diff button. See Reviewing and Undoing Changes.

When the chat is scrolled up, a Scroll to bottom button (down arrow) appears at the lower right of the chat.

Questions From the AI

When the AI needs a decision, it asks with a card. Click an option, or type your own answer in the Type a custom answer box. If the card has several questions, answer each one and click Submit.

Typing in the message box does not answer the question. If you send a message while a question is waiting, the panel points you back to the question and keeps your draft.

The AI can also ask inside the Live Preview, with options you can preview on the page. See Questions in the Live Preview.

Interactive Replies

The AI can answer with something you can try, not just read: a mockup of a layout, a few button styles to click through, a slider to find the right spacing, or a small working demo. It renders right in the chat, so you can explore an idea before anything touches your code.

Click See code under the content to read the code behind it, with a Copy code button. Some interactive replies are questions with a reply box. Make your choice, add a note if you like, and send it from there.

To try options on your own page instead, see Questions in the Live Preview.

Code in Replies

Code blocks in a reply have a Copy button in their header. Blocks longer than five lines can be collapsed with the chevron in the header or the bar at the bottom. Color codes outside code blocks get a swatch so you can see the color.

New, Back, and Home

The buttons in the panel header appear when you move the pointer over the panel:

• New (plus icon): Starts a new conversation. The old one stays in session history. If the AI is working, you are asked before it is stopped.
• Back (left arrow): Returns to the start screen without stopping the chat. The Visual AI row then shows a dot to mark the running chat. Click it, or pick Visual AI from the dropdown in the header, to get back to the chat.
• Visual AI dropdown: Switches between the built-in chat and the CLI tools. Each keeps running while you look at another.

Opening another project resets the chat. If the AI is working, you are asked before the switch.

Session History

Every conversation is saved automatically. Click the history button (clock icon) in the panel header to list the sessions of this project, newest first. Each row shows the first prompt, when it was last used, and the tokens it used. Hover a row to see the title Claude gave the session.

Click a row to continue that conversation. The AI picks up with the full context of the session. Click the trash button on a row to delete it, or Clear all to delete every session of the project.

Sessions are saved per project, so each project has its own history. Up to 50 sessions are kept.

Keyboard Shortcuts

These work while the message box has focus:

Action	Shortcut
Send message	Enter
New line	Shift + Enter
Cycle permission mode	Shift + Tab
Stop the AI	Esc (while the AI is working)
Clear the message box and focus the editor	Esc (when idle)